<template>
	<view style="padding: 20rpx;">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="changeImage()">
			<view class="u-m-r-10">
				<u-avatar :src="user_profile.avatar" size="140"></u-avatar>
			</view>
			<view class="u-flex-1" style="margin-left: 10rpx;">
			</view>
			<view class="u-m-l-10 u-p-10">
			</view>
			<view style="font-size: 32rpx;">修改头像</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		<view class="u-m-t-20" @click="changePwd()">
			<u-cell-group>
				<u-cell-item icon="list-dot" title="修改密码"></u-cell-item>
			</u-cell-group>
		</view>
		<u-form :model="user_profile" :rules="rules" ref="uForm" :errorType="errorType">
			<view style="padding: 30rpx;">
				<u-form-item :label-position="labelPosition" label="个人照片" prop="photo" label-width="150">
					<u-upload ref="uUpload" :file-list="photolist" name="file" :action="paction" width="160"
						height="160"></u-upload>
				</u-form-item>

				<u-form-item :label-position="labelPosition" label="账号">
					<u-input :border="border" placeholder="账号不能修改" v-model="user_profile.username" type="text"
						:disabled="id_enable"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="昵称">
					<u-input :border="border" placeholder="请输入昵称" v-model="user_profile.nickname" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="性别" prop="sex">
					<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="user_profile.sex"
						placeholder="请选择性别" @click="cantChangerSex()"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="所在地区" prop="region" label-width="150">
					<u-input :border="border" type="select" :select-open="pickerShow" v-model="user_profile.region"
						placeholder="请选择地区" @click="pickerShow = true"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="生日" label-width="150">
					<u-input :border="border" type="select" :select-open="selectShowTime"
						v-model="user_profile.birthday" placeholder="请选择生日" @click="selectShowTime = true"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="签名">
					<u-input type="text" :border="border" placeholder="请填写签名" v-model="user_profile.autograph" />
				</u-form-item>
			</view>
		</u-form>
		<u-divider style="margin-top: 40rpx;margin-bottom: 140rpx;">修改完记得保存</u-divider>

		<view class="l-body-fixed">
			<u-button type="primary" size="medium" style="display: flex; align-items: center; justify-content: center;"
				@click="saveInfo()">保存</u-button>
		</view>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
		<u-calendar v-model="selectShowTime" @change="confirmDate" mode="date"></u-calendar>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_profile: {
					avatar: '/static/icon/ui/user/avatar/1.png',
					photo1: '/static/icon/ui/user/avatar/2.png',
					photo2: '/static/icon/ui/user/avatar/3.png',
					photo3: '/static/icon/ui/user/avatar/4.png',
					photo4: '/static/icon/ui/user/avatar/5.png',
					username: '13243707802',
					nickname: '清',
					sex: '男',
					region: '江苏 南京',
					birthday: '1999-02-17',
					autograph: '无签名'
				},
				paction: '',
				selectShowTime: false,
				actionSheetShow: false,
				pickerShow: false,
				id_enable: false,
				border: false,
				labelPosition: 'top',
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					}
				],
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},
						{
							min: 3,
							max: 5,
							message: '姓名长度在3到5个字符',
							trigger: ['change', 'blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
						// 异步验证，用途：比如用户注册时输入完账号，后端检查账号是否已存在
						// {
						// 	trigger: ['blur'],
						// 	// 异步验证需要通过调用callback()，并且在里面抛出new Error()
						// 	// 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样
						// 	asyncValidator: (rule, value, callback) => {
						// 		this.$u.post('/ebapi/public_api/index').then(res => {
						// 			// 如果验证出错，需要在callback()抛出new Error('错误提示信息')
						// 			if(res.error) {
						// 				callback(new Error('姓名重复'));
						// 			} else {
						// 				// 如果没有错误，也要执行callback()回调
						// 				callback();
						// 			}
						// 		})
						// 	},
						// }
					],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}, ],
					intro: [{
							required: true,
							message: '请填写简介'
						},
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change',
						},
						// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
						{
							pattern: /^[\u4e00-\u9fa5]+$/gi,
							message: '简介只能为中文',
							trigger: 'change',
						},
					],
					region: [{
						required: true,
						message: '请选择地区',
						trigger: 'change',
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					]
				},
				errorType: ['message'],
				photolist: [],
			}
		},
		onLoad() {
			this.id_enable = true;
			this.paction = this.HR + 'upload_file';


			this.login_info = this.checkLogin('index', '');
			console.debug('查询是否登录' + this.login_info);
			if (this.login_info) {
				var token = this.login_info[0];
				console.debug('token:' + token);
				console.debug('加载我的数据');
				uni.request({
					url: this.httpRoot + 'user_profile',
					method: 'POST',
					header: {
						"token": token
					},
					data: {},
					success: res => {
						console.debug(res);
						console.debug(res.data);
						var code = 0;
						var data = {};
						var message = '';
						if ('code' in res.data) {
							code = res.data.code;
						}
						if ('message' in res.data) {
							message = res.data.message;
						}
						if ('data' in res.data) {
							data = res.data.data;
							// data = res.data.data.parseJSON(); //由JSON字符串转换为JSON对象
							// data = JSON.parse(res.data.data);
							console.debug('数据：');
							console.debug(data);
							if ('user_profile' in data) {
								this.user_profile = data.user_profile;
								console.debug(data.user_profile)
								this.fileList();
							}
						} else {
							uni.showToast({
								title: '服务器错误',
								icon: 'none'
							});
						}
						if (message != '') {
							uni.showToast({
								title: message,
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showModal({
							title: '请求数据失败'
						});
					},
					complete: () => {}
				});
			}
		},
		methods: {
			cantChangerSex() {
				uni.showToast({
					title: '性别不能修改',
					icon: 'none'
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.user_profile.sex = this.actionSheetList[index].text;
			},
			regionConfirm(e) {
				this.user_profile.region = e.province.label + ' ' + e.city.label + ' ' + e.area.label;
			},
			confirmDate(e) {
				this.user_profile.birthday = e.result;
				console.debug(e.result);
			},
			changeImage() {
				console.debug('修改头像');
				uni.navigateTo({
					url: '../user_changer_avatar/user_changer_avatar'
				})
			},
			fileList() {
				var res = [];
				if (this.user_profile.photo1 != '') {
					var item;
					item = {
						url: this.user_profile.photo1
					};
					res.push(item);
				}
				if (this.user_profile.photo2 != '') {
					var item;
					item = {
						url: this.user_profile.photo2
					};
					res.push(item);
				}
				if (this.user_profile.photo3 != '') {
					var item;
					item = {
						url: this.user_profile.photo3
					};
					res.push(item);
				}
				if (this.user_profile.photo4 != '') {
					var item;
					item = {
						url: this.user_profile.photo4
					};
					res.push(item);
				}
				this.photolist = res;
			},
			changePwd() {
				console.debug('修改密码');
				uni.navigateTo({
					url: '../user_change_password/user_change_password'
				})
			},
			saveInfo() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				});
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files);

				var p1, p2, p3, p4;
				if (files.length > 0) {
					p1 = files[0].response;
				} else {
					p1 = '';
				}
				if (files.length > 1) {
					p2 = files[1].response;
				} else {
					p2 = '';
				}
				if (files.length > 2) {
					p3 = files[2].response;
				} else {
					p3 = '';
				}
				if (files.length > 3) {
					p4 = files[3].response;
				} else {
					p4 = '';
				}
				console.debug("保存资料");
				console.debug('照片列表');
				console.debug(p1);
				console.debug(p2);
				console.debug(p3);
				console.debug(p4);
				console.debug('昵称 ' + this.user_profile.nickname);
				console.debug('地区 ' + this.user_profile.region);
				console.debug('生日 ' + this.user_profile.birthday);
				console.debug('签名 ' + this.user_profile.autograph);

				this.login_info = this.checkLogin('index', '');
				console.debug('查询是否登录' + this.login_info);
				if (this.login_info) {
					var token = this.login_info[0];
					console.debug('token:' + token);
					console.debug('加载我的数据');
					uni.request({
						url: this.httpRoot + 'update_profile',
						method: 'POST',
						header: {
							"token": token
						},
						data: {
							p1: p1,
							p2: p2,
							p3: p3,
							p4: p4,
							nickname: this.user_profile.nickname,
							region: this.user_profile.region,
							birthday: this.user_profile.birthday,
							autograph: this.user_profile.autograph
						},
						success: res => {
							console.debug(res);
							console.debug(res.data);
							var code = 0;
							var data = {};
							var message = '';
							if ('code' in res.data) {
								code = res.data.code;
							}
							if ('message' in res.data) {
								message = res.data.message;
							}

							if (code == 200) {
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								});
							}

							if (message != '') {
								uni.showToast({
									title: message,
									icon: 'none'
								});
							}
						},
						fail: () => {
							uni.showModal({
								title: '请求失败'
							});
						},
						complete: () => {}
					});

				} else {
					uni.showToast({
						title: '未登录',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.l-body-fixed {
		position: fixed;
		left: 0upx;
		bottom: 0upx;
		z-index: 95;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100upx;
		padding: 0 var(--pad-lr);
		background-color: #f7f7fa;
	}
</style>
